import React, { useEffect, useState } from 'react'
import { Input, Button, Table, Modal, Radio, Upload } from "antd"
import { request, history, useLocation } from 'umi'
import "./index.less"
export default function index() {
    const { query: { b: { activityName, activityStatus, isEveryoneExpose, timeDate, key } } }: any = useLocation()
    const rowSelection = {}
    const columns = [
        {
            title: '姓名',
            dataIndex: 'activityName',
        },
        {
            title: '手机号',
            dataIndex: 'modifierId',
        },
        {
            title: '创建时间',
            dataIndex: 'gmtCreated',
        },
    ];
    const [data, setData] = useState([])
    const [isModalVisible, setIsModalVisible] = useState(false)
    const [value, isValue] = useState<any>(1)
    const [valueName, setValueName] = useState<any>();
    const [valueIphone, setValueIphone] = useState<any>()
    const [fileList, setFileList] = useState([])
    const getList = () => {
        request("/campus/campusweb/activity/queryByActivityBasicId", {
            method: "post",
            data: {
                activityBasicId: key,
            }
        }).then(res => {
            if (res.code == 200) {
                res.data
                let arr: any = []
                arr.push({
                    activityName: res.data.activityName,
                    modifierId: res.data.modifierId,
                    gmtCreated: res.data.gmtCreated,
                    key: res.data.id
                })
                setData(arr)
            }
            console.log(data, "res")
        })
    }
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    const onChange = (e: any) => {
        console.log(e.target.value, "e")
        isValue(e.target.value)
    }
    const serch = () => {
        request('/campus/campusweb/activity/candidate/pageByCandidateQuery', {
            method: "post",
            data: {
                userName: valueName,
                mobile: valueIphone,
                page: 1,
                pageSize: 10,
                activityBasicId: key
            }
        }).then(res => {
            console.log(res)
        })
    }
    const res = () => {
        setValueName("")
        setValueIphone("")
    }
    const changeName = (e: any) => {
        setValueName(e.target.value)
    }
    const changeIphone = (e: any) => {
        setValueIphone(e.target.value)
    }
    const load = () => {
        request('/campus/campusweb/activity/candidate/downloadCandidateTemplate', {
            method: "post",
            data: {},
            responseType: 'blob'
        }).then(res => {
            console.log(res, "res")
        })
    }
    // 上传
    const customRequest = (e: any) => {
        console.log(key, "key")
        let formdata = new FormData()
        formdata.append('file', e.file)
        formdata.append('activityBasicId', key)

        request("/campus/campusweb/activity/candidate/importCandidates", {
            method: 'post',
            data: formdata
        }).then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })
        return false
    }
    useEffect(() => {
        getList()
    }, [])
    return (
        <div className='settingWhiteList'>
            <div className='editWhiteList settingWhiteList-div'>
                <div>
                    <h1>设置白名单</h1>
                </div>
                <div className='activeDetail'>
                    <p><span>活动名称:</span> <span>{activityName}</span></p>
                    <p><span>活动状态:</span> <span>{activityStatus}</span></p>
                    <p><span>抽奖活动时间: </span><span>{timeDate}</span></p>
                    <p><span>公开方式:</span> <span>{isEveryoneExpose} <b onClick={showModal}>修改</b> </span></p>
                </div>
            </div>
            <div className='settingWhiteList-Item settingWhiteList-div'>
                <div>
                    <h1>抽奖白名单</h1>
                </div>
                <div className='settingWhiteList-ItemInp'>
                    <div>
                        <span>姓名:</span>  <Input placeholder='请输入' onChange={changeName} value={valueName} />
                    </div>
                    <div>
                        <span>手机号:</span>  <Input placeholder='请输入' onChange={changeIphone} value={valueIphone} />
                    </div>
                    <div>
                        <Button className='serch' onClick={serch}>搜索</Button>
                        <Button className='res' onClick={res}>重置</Button>
                    </div>
                </div>
                <div className='settingWhiteList-ItemBtn'>
                    <div className='btn'>
                        <Upload
                            customRequest={customRequest}
                            fileList={fileList}
                        >
                            <Button type='primary'>导入</Button>
                        </Upload>
                        {/* <Button onClick={exports} className='export'>导入</Button> */}
                        <Button className='delete'>删除</Button>
                    </div>
                    <div className='tit'>
                        <span onClick={load}>下载导入模板</span>
                        <span>查看导入进度</span>
                    </div>
                </div>
                <div className='settingWhiteList-ItemTab'>
                    <Table
                        rowSelection={rowSelection}
                        columns={columns}
                        dataSource={data}
                    />

                </div>
                <div className='back'>
                    <Button onClick={() => { history.go(-1) }}>返回</Button>
                </div>
            </div>

            <Modal title="修改公开方式" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <div>
                    <span>公开方式：</span>
                    <Radio.Group onChange={onChange} value={value}>
                        <Radio value={1}>所有用户</Radio>
                        <Radio value={2}>白名单用户</Radio>
                    </Radio.Group>
                </div>
            </Modal>
        </div>
    )
}
